<template>

  <node-graphic
      v-for="graphicConfig in graphicConfigs"
      style="margin-bottom: 20px"
      :graphic-config="graphicConfig"
      draggable="true"
      @dragstart="handleDragstart(graphicConfig,$event)"

  />
</template>
<script setup>
import {graphicConfigs} from "@/const/consts"
import NodeGraphic from "@/components/NodeGraphic.vue";

const handleDragstart=(graphicConfig,e)=>{
  let target = e.target;
  e.dataTransfer.setData("mouseX",e.clientX-target.getBoundingClientRect().left)
  e.dataTransfer.setData("mouseY",e.clientY-target.getBoundingClientRect().top)
  e.dataTransfer.setData("graphicConfig",JSON.stringify(graphicConfig))

}
</script>



<style scoped>

.rectangle{
  width: 100px;
  height: 60px;
  border: 1px solid black;
}
</style>